<template> 
    <div class="shop-header"> 
        <nav class="shop-nav" :style="{backgroundImage:`url(${info.bgImg})`}" > 
            <a class="back" @click="$router.back()"> 
                <i class="iconfont icon-xiangzuo1"></i> 
            </a> 
        </nav> 
        <div class="shop-content"> 
            <img class="content-image" :src="info.avatar"> 
            <div class="header-content">            
                <h2 class="content-title" @click="toggleShop"> 
                    <a class="content-tag">          
                        <span class="mini-tag">品牌</span>
                    </a> 
                    <span class="content-name">{{info.name}}</span> 
                    <span class="content-icon"></span> 
                </h2> 
                <div class="shop-message">          
                    <span class="shop-message-detail">{{info.score}}</span> 
                    <span class="shop-message-detail">月售{{info.sellCount}}单</span> 
                    <span class="shop-message-detail">{{info.description}} <span>约{{info.deliveryTime}}分钟</span>
                    </span> 
                    <span class="shop-message-detail">距离{{info.distance}}</span> 
                </div> 
            </div> 
        </div>

        <div class="shop-header-discounts" @click="toggleSupport" v-if="info.supports">            
            <div class="discounts-left">    
                <div class="activity activity-green"> 
                    <a class="content-tag" :class="supportClass[info.supports[0].type]"> 
                    <span class="mini-tag">{{info.supports[0].name}}</span> 
                    </a> 
                    <span class="activity-content ellipsis">{{info.supports[0].content}}</span> 
                </div> 
            </div> 
            <div class="discounts-right"> {{info.supports.length}}个优惠 </div>
        </div>
        <transition name="fade">
        <div class="shop-brief-modal" v-show="showShop"> 
            <div class="brief-modal-content">          
                <h2 class="content-title"> 
                    <a class="content-tag"> 
                    <span class="mini-tag">品牌</span> 
                    </a> 
                    <span class="content-name">{{info.name}}</span> 
                </h2> 
                <ul class="brief-modal-msg">          
                    <li>
                        <h3>{{info.score}}</h3> 
                        <p>评分</p>
                    </li> 
                    <li>
                        <h3>{{info.sellCount}}单</h3> 
                        <p>月售</p> 
                    </li> 
                    <li>
                        <h3>{{info.description}}</h3> 
                        <p>约{{info.deliveryTime}}分钟</p> 
                    </li> 
                    <li>
                        <h3>{{info.deliveryPrice}}</h3> 
                        <p>配送费用</p> 
                    </li> 
                    <li>
                        <h3>{{info.distance}}</h3> 
                        <p>距离</p> 
                    </li> 
                </ul> 
                <h3 class="brief-modal-title">
                    <span>公告</span>
                </h3> 
                <div class="brief-modal-notice">{{info.bulletin}}</div> 
                <div class="mask-footer" @click="toggleShop">             
                    <i class="iconfont icon-searchclose"></i> 
                </div> 
            </div> 
            <div class="brief-modal-cover"></div> 
        </div> 
        </transition>

        <transition name="fade">
        <div class="activity-sheet" v-show="showSupport">
            <div class="activity-sheet-content"> 
                <h2 class="activity-sheet-title">优惠活动</h2> 
                <ul class="list"> 
                    <li class="activity-item" 
                    v-for="(item,index) in info.supports" :key="index"
                    :class="supportClass[item.type]"> 
                    <a class="content-tag" > 
                        <span class="mini-tag">{{item.name}}</span> 
                    </a>
                    <span class="activity-content">{{item.content}}</span> 
                    </li> 
                </ul> 
                <div class="activity-sheet-close" @click="toggleSupport"> 
                    <i class="iconfont icon-searchclose"></i> 
                </div> 
            </div> 
            <div class="activity-sheet-cover"></div> 
        </div>
        </transition>
    </div>    
</template> 

<script> 
import {mapState} from 'vuex'
export default {
    data() {
        return {
            supportClass:['activity-green','activity-red','activity-orange'],
            showShop:false,
            showSupport:false
        }
    },
    computed: { 
        ...mapState(['info']) 
    },
    methods: {
        toggleShop(){
            this.showShop = !this.showShop;
        },
        toggleSupport(){
            this.showSupport = !this.showSupport;
        }
    },
} 
</script> 

<style lang="stylus" rel="stylesheet/stylus"> 
// 通用content-tag颜色样式
.activity-green 
    .content-tag 
        background-color rgb(112, 188, 70) 
.activity-red
    .content-tag 
        background-color rgb(240, 115, 115)
.activity-orange
    .content-tag 
        background-color: rgb(241, 136, 79) 
// 通用content-title样式
.content-title 
    font-size 1.2rem  
    white-space nowrap 
    display flex 
    align-items center 
    justify-content center 
    color #333 
    line-height 2rem
    .content-tag 
        display block
        border-radius 0.1rem 
        width 2rem 
        height 1rem 
        color #6a3709 
        position relative 
        background-image linear-gradient(90deg, #fff100, #ffe339) 
        .mini-tag 
            position absolute 
            left 0 
            top 0 
            right -100% 
            bottom -100% 
            font-size 1.2rem
            font-weight 600 
            transform scale(.5) 
            transform-origin 0 0 
            display flex 
            align-items center 
            justify-content center 
    .content-name 
        font-weight 700 
        overflow hidden
        text-overflow ellipsis 
        margin: 0 0.8rem;
    .content-icon
        width 1.2rem 
        height 1rem
        position relative  
        &::after 
            content "" 
            border-style solid 
            border-width 6px 0 6px 7px 
            border-color transparent transparent transparent rgba(0, 0, 0, .67)
            position absolute 
            left 4px 
            top 4px       
.shop-header 
    height 100% 
    position relative 
    background #fff 
    overflow hidden 
    .shop-nav 
        height 2.4rem 
        position relative 
        background-size cover
        background-repeat no-repeat 
        &::before 
            content "" 
            position absolute 
            left 0 
            right 0 
            top 0 
            bottom 0 
            background-color rgba(119, 103, 137, .43)
        .back 
            position: absolute 
            .iconfont 
                display: block 
                padding: 0.4rem 
                font-size: 1.2rem 
                color: #fff
.shop-content 
    display flex
    background #fff 
    text-align center 
    position relative
    padding 1.8rem 0 0.4rem
    .content-image
        position absolute 
        top 0 
        left 50%
        margin-left -1.8rem 
        margin-top -1.8rem
        box-shadow 0 0 0.4rem rgba(0, 0, 0, .4)  
        width 3.6rem 
        height 3.6rem 
        border-radius: 0.1rem 
    .header-content 
        flex 1 
        width 72%  
        .shop-message 
            font-size 11px 
            color #333 
            .shop-message-detail:not(:last-child)::after 
                content " \B7 " 
                opacity 1
.shop-header-discounts 
    display flex 
    border-radius 1px 
    border 1px solid #eee 
    padding 7px 
    font-size 11px 
    color #666 
    margin 0 30px 
    align-items center 
    .discounts-left 
        flex 1 
        overflow hidden 
        .activity 
            display flex 
            align-items center 
            .content-tag 
                border-radius 1px 
                width  1.8rem   
                height 0.6rem
                line-height 0.6rem  
                margin-right 0.2rem 
                color #fff 
                font-style normal 
                font-weight 700 
                position relative 
                .mini-tag 
                    position absolute 
                    left 0 
                    top 0 
                    right -100% 
                    bottom -100% 
                    font-size 18px 
                    font-weight 600 
                    transform scale(.5) 
                    transform-origin 0 0 
                    display flex 
                    align-items center 
                    justify-content center
    .discounts-right 
        flex-shrink 0 
        position relative 
        padding-right 10px 
        text-align right 
        &::after 
            content "" 
            display block 
            border-style solid 
            border-width 4px 4px 0 
            border-color rgba(0, 0, 0, .57) transparent transparent 
            position absolute 
            top 50% 
            transform translateY(-50%) 
            right 0
.shop-brief-modal 
    position fixed 
    top 0 
    left 0 
    right 0 
    bottom 0 
    display flex 
    justify-content center 
    align-items center 
    z-index 52 
    flex-direction column 
    color #333 
    &.fade-enter-active,&.fade-leave-active
        transition opacity .5s
    &.fade-enter,&.fade-leave-to
        opacity 0
    .brief-modal-cover 
        position absolute 
        width 100% 
        height 100% 
        top 0 
        left 0 
        background-color rgba(0, 0, 0, .5) 
        z-index 1
    .brief-modal-content 
        position relative 
        width 80% 
        padding 25px 20px 
        border-radius 5px 
        background #fff 
        z-index 99 
        display flex 
        flex-direction column 
        .brief-modal-msg 
            display flex 
            margin 16px -18px 0 
            > li
                flex 1 
                text-align center 
                > h3
                    font-size 15px 
                    font-weight 600 
                    color #333 
                    margin-bottom 8px 
                > p
                    font-size 12px 
                    color #999 
        .brief-modal-title 
            position relative 
            text-align center 
            margin 15px auto 15px 
            width 85px 
            background-image linear-gradient(90deg, #fff, #333 50%, #fff) 
            background-size 100% 1px 
            background-position 50% 
            background-repeat no-repeat 
            >span 
                font-size 12px 
                padding 0 6px 
                color #999 
                background-color #fff 
        .brief-modal-notice 
            font-size 13px 
            line-height 1.54 
            color #333
            overflow-y auto
        .mask-footer 
            position absolute 
            bottom -60px 
            left 50% 
            padding 6px 
            border 1px solid rgba(255, 255, 255, .7) 
            border-radius 50% 
            transform translateX(-50%) 
            .iconfont
                font-size 16px 
                color rgba(255, 255, 255, .7)
.activity-sheet 
    position fixed 
    top 0 
    left 0
    width 100% 
    height 100% 
    z-index 99 
    &.fade-enter-active,&.fade-leave-active
        transition opacity .5s
    &.fade-enter,&.fade-leave-to
        opacity 0
    .activity-sheet-content 
        position absolute 
        background-color #f5f5f5 
        box-shadow 0 -1px 5px 0 rgba(0, 0, 0, .4) 
        bottom 0 
        left 0 
        right 0 
        z-index 100 
        padding 20px 30px 
        box-sizing border-box 
        transition transform .2s
        will-change transform 
        color #333
        .activity-sheet-title 
            text-align center 
            font-size 20px 
            font-weight 600 
            margin-bottom 20px 
        .list 
            font-size 16px 
            height 160px 
            overflow-y auto 
            .activity-item 
                margin-bottom 12px 
                display flex 
                font-size 13px 
                align-items center 
                .content-tag 
                    display inline-block 
                    border-radius 2px
                    width 36px 
                    height: 18px 
                    margin-right 10px 
                    color #fff 
                    font-style normal 
                    position relative 
                    .mini-tag 
                        position absolute 
                        left 0 
                        top 0 
                        right -100% 
                        bottom -100% 
                        font-size 24px
                        transform scale(.5)
                        transform-origin 0 0
                        display flex 
                        align-items center 
                        justify-content center 
        .activity-sheet-close 
            position absolute 
            right 6px 
            top 10px 
            width 25px 
            height 25px 
            >.iconfont 
                font-size 20px 
    .activity-sheet-cover 
        position absolute 
        width 100% 
        height 100% 
        top 0 
        left 0 
        background-color rgba(0, 0, 0, .5)                            
                    
</style>